// 1.饼形图  --pie
function stePie(arr) {
  let myChat = echarts.init(document.querySelector('.pie'))
  let option = {
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 提示框
    tooltip: {
      //  formatter:'各地人员分布<br>广西省4人 占比45.8%'
      formatter: '{a}<br>{b} <b>{c}</b>人 占比{d}%'
    },

    series: [
      {
        // 提示的时候使用
        name: '各地人员分布',
        // 图表类型
        type: 'pie',
        // 内外圆心半径
        radius: ['10%', '65%'],
        // 原心位置
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 4
        },
        data: arr
      }
    ]
  };
  myChat.setOption(option)
}
//调用
stePie()

// 2.折线图  --line

function steLine(obj) {
  let myChat = echarts.init(document.querySelector('.line'))
  let option = {
    // 图例
    legend: {
      top: 20,
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], '10%'];
      }
    },
    // 标题
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: obj.name
    },
    yAxis: {
      type: 'value',
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '50%'],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    // 数据部分
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 表示使用平滑曲线
        symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        itemStyle: { // 单独控制这条线的颜色
          color: '#ee6666'
        },
        data: obj.salary
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5470c6'
        },
        data: obj.truesalary
      }
    ]
  };
  myChat.setOption(option)

}
//调用
// steLine()

// 3.柱形图 --bar

function steBar(obj) {
  let myChat = echarts.init(document.querySelector('.barChart'))
  option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
      axisPointer: {   // 坐标轴指示器配置项
        // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 删除工具栏 图例组件不需要设置内容
    legend: {},

    // 处理x轴
    xAxis: [
      {
        type: 'category',
        data: obj.group,
        // 鼠标聚焦坐标轴后 如何处理
        axisPointer: {
          type: 'shadow'    //阴影显示
        }
      }
    ],

    // 处理y轴
    yAxis: [
      {
        //第一个对象控制在左侧y轴
        type: 'value',
        //删除name属性
        min: 0,  //最小值
        max: 100,
        interval: 10,  //间隔
        axisLabel: {
          formatter: '{value} 分' //内容格式
        }
      },
      {//第二个对象控制右侧y轴
        type: 'value',

        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: '15', //柱子宽度
        data: obj.avgScore,
      },
      {
        name: '低于60分人数',
        type: 'bar',
        // yAxisIndex为0，已左侧为准 1为右侧做准备
        yAxisIndex: 1,
        barWidth: '15', //柱子宽度

        data: obj.lt60,
      },

      {
        name: '60到80分之间',
        type: 'bar',
        // yAxisIndex为0，已左侧为准 1为右侧做准备
        yAxisIndex: 1,
        barWidth: '15', //柱子宽度

        data: obj.gt60,
      },

      {
        name: '高于80分人数',
        type: 'bar',
        // yAxisIndex为0，已左侧为准 1为右侧做准备
        yAxisIndex: 1,
        barWidth: '15', //柱子宽度
        data: obj.gt80,
      },

    ]
  };
  myChat.setOption(option)
}
//调用
// steBar()


// 4.地图  --map
function setMap(a, b) {
  let myChart = echarts.init(document.querySelector(".map"));
  // 位置 + 经纬度
  var chinaGeoCoordMap = a;
  var chinaDatas = b;
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['顺义校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });
  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };
  myChart.setOption(option);
}
// 调用
// let add = { '顺义校区': [116.4551, 40.2539] };
let add = {
  "顺义校区": [
    116.4551,
    40.2539
  ],
  "海拉尔区": [
    119.736279,
    49.212189
  ],
  "市中区": [
    116.997777,
    36.651474
  ],
}

// [{ name: item.county, value: 0 }]
// let arr = [{name: '武汉市黄陂区', value: 0}];
let arr = [
  [
    {
      "name": "海拉尔区",
      "value": 0
    }
  ],
  [
    {
      "name": "市中区",
      "value": 0
    }
  ],
]
// setMap(add, arr);



//需求1： 班级概况渲染 发送ajax
axios.get('/student/overview').then(({ data: res }) => {
  // console.log(res)
  // 判断业务状态码
  if (res.code == 0) {
    document.querySelector('.total').innerHTML = res.data.total
    document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
    document.querySelector('.avgAge').innerHTML = res.data.avgAge
    document.querySelector('.proportion').innerHTML = res.data.proportion
  }
})

// 需求2 点击按钮 显示隐藏成绩展示区
let batch = document.querySelector('#batch')
document.querySelector('.btn').onclick = function () {
  // 显示隐藏切换
  if (batch.style.display == 'none') {
    batch.style.display = 'block'
  } else {
    batch.style.display = 'none'
  }
}

// 需求3 给所有li 绑定点击事件
// 点击第几次成绩 就运行第几次成绩对应的柱状图
let lis = document.querySelectorAll('#batch li')
for (let i = 0; i < lis.length; i++) {
  lis[i].onclick = function () {
    //  获取自定UI属性 将来发送ajax
    let index = this.getAttribute('data-index')
    // console.log(index)

    axios({
      method: 'get',
      url: '/score/batch',
      params: {
        batch: index
      }
    }).then(({ data: res }) => {
      // console.log(res)
      if (res.code == 0) {
        steBar(res.data)
        // console.log(res)
      }
    })
  }
}

// 页面加载后 默认触发第一次成绩
lis[0].click()


// 需求4 饼形图 折线图 地图全部实时数据渲染
//  这三个图的数据 来源于同一个ajax
axios({
  method: 'get',
  url: '/student/list'

}).then(({ data: res }) => {
  // 判断状态码
  if (res.code == 0) {
    // console.log(res)
    // res.data 数据不能直接渲染 饼形图 折线图 地图
    // 需要遍历之后 手动生成想要的数据

    // 1.1折线图需要的数据 是三个数组
    let lineData = {
      name: [],
      salary: [],
      truesalary: []

    }
    // let name = [],
    //   salary = [],
    //   truesalary = []

    // 2.1 定义一个饼形图数据 数组里面放对象
    let pieData = []  //{value:40,name='河北省'}

    // 3.1 定义地图表需要的数据 一个对象 一个数组
    // 第一个地图及维度是目标位置 其他的才是学生家乡位置
    let mapData1 = { '顺义校区': [116.4551, 40, 2539] }
    // 数组之中在包数组 然后数组中包对象
    // [
    // [{ 'name': '海尔拉区', 'value': 0 }],
    //   [{ 'name': '市中心', 'value': 0 }]
    //     ]

    let mapData2 = []

    //需要遍历之后 手动生成想要的数据
    res.data.forEach(ele => {
      // console.log(ele)
      // 2.2生成三个折线图需要的数据
      lineData.name.push(ele.name)
      lineData.salary.push(ele.salary)
      lineData.truesalary.push(ele.truesalary)


      // 2.2 给饼形图数据中添加内容
      //  判断:当前学生对象 在数组中是否有与之对应的元素
      // 如果有 value值++ 如果没有 添加一个新对象
      // arr.findIndex(a=> a =='ddd')
      // 可以根据学生的省份 判断数组中元素name 值是否相同 来查找索引值

      let index = pieData.findIndex(item => item.name == ele.province)

      // 判断的学生对象是ele 在pieData 这个数组中的索引值是否存在

      if (index !== -1) {
        // [{value:40,name:'河北省'},{value:40,name:'河北省'}]

        pieData[index].value++
      } else {
        // 如果元素在数组中不存在 就直接添加一个
        pieData.push({ value: 1, name: ele.province })
      }


      // 3.2 把地图需要的数据 组装好
      // 用区做属性 用数组套经纬度做值
      mapData1[ele.county] = [ele.jing, ele.wei]
      // 可以根据学生的区 判断数组中元素(二维数组)的name值是否向同行 来查找索引值
      // item是一个一个的数组 我们要用的是数组中的对象的name属性值
      let i = mapData2.findIndex(item => item[0].name == ele.county)
      if (i != -1) {
        mapData2[i][0].value++  //mapData2[i]是数组,mapData2[i][0]是数组中的对象
      } else {
        // 如果元素在数组中不存在 就直接添加一个
        // 添加的数据就是数组里面放对象
        mapData2.push([{ value: 1, name: ele.county }])
      }
    })

    // 初始化 折线图 饼形图
    steLine(lineData)
    stePie(pieData)
    setMap(mapData1, mapData2)
  }

})